<template>
  <view class="container">

    <!-- 房产图片轮播 -->
    <view class="property-swiper-section" v-if="listImages.length > 0">
      <u-swiper :list="listImages" :autoplay="true" :circular="true" :interval="3000" height="400"></u-swiper>
    </view>

    <!-- 基础信息卡片 -->
    <view class="info-card basic-info-card">
      <text class="property-name">{{ model.name }}</text>
      <view class="price-area">
        <text class="price-value">{{ formattedPrice }}</text>
        <text class="area-value">{{ model.area }}㎡</text>
      </view>
      <view class="tags-section" v-if="propertyTags.length > 0">
        <u-tag v-for="tag in propertyTags" :key="tag" :text="tag" plain bg-color="#e0f2fe" color="#0369a1" shape="circle"></u-tag>
        <u-tag v-if="model.isFeatured" text="推荐" type="primary" plain bg-color="#fef3c7" color="#d97706" size="mini" shape="circle"></u-tag>
      </view>
    </view>

    <!-- 详细属性卡片 -->
    <view class="info-card detail-attributes-card">
      <view class="section-title">
        <u-icon name="list" color="#0ea5e9" size="18"></u-icon>
        <text class="title-text">房产属性</text>
      </view>
      <view class="attributes-grid">
        <view class="attribute-item">
          <text class="label">类型：</text>
          <text class="value">{{ model.type }}</text>
        </view>
        <view class="attribute-item">
          <text class="label">用途：</text>
          <text class="value">{{ model.purpose }}</text>
        </view>
        <view class="attribute-item">
          <text class="label">户型：</text>
          <text class="value">{{ model.layout }}</text>
        </view>
        <view class="attribute-item">
          <text class="label">楼层：</text>
          <text class="value">{{ model.floorInfo }}</text>
        </view>
        <view class="attribute-item">
          <text class="label">建造年份：</text>
          <text class="value">{{ model.buildYear }}年</text>
        </view>
      </view>
    </view>

    <!-- 位置信息卡片 -->
    <view class="info-card location-card" @click="handleOpenMap">
      <view class="section-title">
        <u-icon name="map" color="#10b981" size="18"></u-icon>
        <text class="title-text">位置信息</text>
        <u-icon name="arrow-right" color="#94a3b8" size="16" class="arrow-right"></u-icon>
      </view>
      <text class="address-text">{{ model.province }}{{ model.city }}{{ model.district }}{{ model.address }}</text>
    </view>

    <!-- 房产描述卡片 -->
    <view class="info-card description-card">
      <view class="section-title">
        <u-icon name="file-text" color="#f59e0b" size="18"></u-icon>
        <text class="title-text">房产描述</text>
      </view>
      <text class="description-content">{{ model.description }}</text>
    </view>


    <!-- 底部操作栏 -->
    <view class="bottom-action-bar">
      <u-button type="primary" shape="circle" :custom-style="bookViewingBtnStyle" @click="callContact">
        电话咨询
      </u-button>
    </view>

    <!-- 提示组件 -->
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        model: {
          id: 11,
          "name": "金域华府",
          "province": "云南省",
          "city": "昆明市",
          "district": "官渡区",
          "address": "环城南路88号",
          "type": "住宅",
          "purpose": "出售",
          "area": 95.8,
          "price": 1850000,
          "layout": "3室2厅1卫",
          "floorInfo": "12/28层",
          "buildYear": 2016,
          "description": "地铁口，精装修，南北通透，小区绿化率高。",
          "isFeatured": true,
          "isEnabled": true,
          "imageUrls": "[\"https://picsum.photos/300/200?tant=7\",\"https://picsum.photos/300/200?tant=8\"]",
          "tagsJson": "[\"地铁房\",\"精装修\",\"南北通透\"]",
          "position": "102.640491,24.976341"
        },
        // 按钮样式
        bookViewingBtnStyle: {
          flex: '1',
          background: 'linear-gradient(135deg, #0ea5e9, #06b6d4)',
          border: 'none',
          height: '88rpx',
          fontSize: '32rpx',
          marginLeft: '24rpx'
        },
        phoneNumbers: []
      }
    },
    computed: {
      propertyTags() {
        try {
          return this.model.tagsJson ? JSON.parse(this.model.tagsJson) : [];
        } catch (e) {
          console.error("Error parsing TagsJson:", e);
          return [];
        }
      },
      listImages() {
        try {
          return this.model.imageUrls ? JSON.parse(this.model.imageUrls) : [];
        } catch (e) {
          console.error("Error parsing ImageUrls:", e);
          return [];
        }
      },
      formattedPrice() {
        if (this.model.price >= 10000) {
          return `${(this.model.price / 10000).toFixed(2)}万`;
        }
        return `${this.model.price}元`;
      }
    },
    onLoad(options) {
      if (options.id) {
        this.model.id = options.id;
        this.fetchData();
      }
    },
    methods: {
      fetchData() {
        uni.$u.http.get('/api/house/' + this.model.id).then(response => {
          let { code, message, result } = response.data
          if (code != 200) {
            this.$u.toast(message)
            return
          }
          this.model = result
          if (result.phoneNumbers) {
            this.phoneNumbers = JSON.parse(result.phoneNumbers)
          }

          // console.log(result)
        }).catch(err => {
          console.error('获取信息失败:', err)
        })
      },
      handleOpenMap() {

        let pos = this.model.position
        if (!pos) {
          this.$refs.uToast.show({
            message: '未找到位置信息',
            type: 'info'
          });
          return
        }

        let lnglat = JSON.parse(this.model.position)
        // console.log('打开地图导航');
        uni.openLocation({
          latitude: lnglat[1], // 故宫经纬度示例
          longitude: lnglat[0],
          name: this.model.name,
          address: this.model.address
        })
      },
      callContact() {
        let list = this.phoneNumbers.map(t => t.phone)
        if (list.length == 0) {
          this.$u.toast('未填写号码信息')
          return
        }
        uni.showActionSheet({
          itemList: list,
          success: (res) => {
            uni.makePhoneCall({
              phoneNumber: list[res.tapIndex]
            })
          }
        })
      },
      bookViewing() {
        this.$refs.uToast.show({
          message: `功能开发中，请自己打电话。`,
          type: 'success'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
  }

  .property-swiper-section {
    margin-bottom: 24rpx;
  }

  .info-card {
    background: white;
    border-radius: 24rpx;
    margin: 0 10rpx 10rpx;
    padding: 32rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
    border: 1rpx solid #f1f5f9;
  }

  .basic-info-card {
    margin-top: 24rpx; // 留出顶部导航栏的空间

    .property-name {
      font-size: 48rpx;
      font-weight: bold;
      color: #1e293b;
      line-height: 1.3;
      margin-bottom: 16rpx;
      display: block;
    }

    .price-area {
      display: flex;
      align-items: baseline;
      margin-bottom: 24rpx;

      .price-value {
        font-size: 40rpx;
        font-weight: 600;
        color: #ef4444;
        margin-right: 24rpx;
      }

      .area-value {
        font-size: 28rpx;
        color: #64748b;
      }
    }

    .tags-section {
      display: flex;
      flex-wrap: wrap;
      margin-top: 16rpx;
    }
  }

  .section-title {
    display: flex;
    align-items: center;
    gap: 12rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 32rpx;

    .arrow-right {
      margin-left: auto;
    }
  }

  .detail-attributes-card {
    .attributes-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24rpx 32rpx;

      .attribute-item {
        display: flex;
        align-items: center;

        .label {
          font-size: 28rpx;
          color: #94a3b8;
          flex-shrink: 0;
        }

        .value {
          font-size: 28rpx;
          color: #334155;
          flex: 1;
        }
      }
    }
  }

  .location-card {
    .address-text {
      font-size: 28rpx;
      color: #475569;
      line-height: 1.5;
    }
  }

  .description-card {
    .description-content {
      font-size: 28rpx;
      color: #475569;
      line-height: 1.6;
    }
  }

  .bottom-space {
    height: 40rpx; // 底部留白，防止内容被底部操作栏遮挡
  }

  .bottom-action-bar {
    display: flex;
    align-items: center;
    padding: 40upx 20upx;

    .action-icon-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 32rpx;
      flex-shrink: 0;

      .btn-text {
        font-size: 22rpx;
        color: #64748b;
      }
    }
  }
</style>